<template>
	<view class="dialy-post">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{titles[postdata.special]}}</block>
		</cu-custom>
		<form>
			<view class="cu-list menu" v-if="postdata.special==2">
				<view class="cu-item">
					<view class="content">
						<image :src="data.avatar" class="png round" mode="aspectFit"></image>
						<text class="text-grey">{{data.nickname}}</text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="head">
					<view class="cover" v-if="data.cover">
						<image :src="data.cover" mode="aspectFill"></image>
						<button @click="ChooseCover" class="cu-btn bg-yellow sm round text-white">重新上传</button>
					</view>
					<view @click="ChooseCover" class="uploader text-center" v-else>
						<view class="nocover">
							<image src="@/static/images/img_no_cover.png" mode="aspectFit"></image>
						</view>
						<view class="text-muted padding-xs">
							<text>上传作品封面(视频自动截取封面)</text>
						</view>
					</view>
				</view>
				<view class="cu-form-group must solid-top">
					<view class="title">作品标题</view>
					<input placeholder="给作品起一个满分的标题" v-model="postdata.title" name="title"></input>
				</view>
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" auto-focus="true" v-model="postdata.content" :placeholder="postdata.special==2?'每日打卡,分享新鲜事~':'在这里简单描述你的作品，如制作过程、成品展示、技巧分享等~'"></textarea>
			</view>
			<!-- 判断视频时长 -->
			<view class="cu-form-group must" v-if="data.videourl!=''">
				<view class="title">视频时长</view>
				<input placeholder="例如:1小时5分" v-model="postdata.duration" name="duration"></input>
			</view>
			<view class="cu-bar solid-top bg-white padding-left padding-right">
				<view class="justify-start flex text-xxl">
					<view :class="postdata.pics.length<9?'text-yellow':'text-gray'" @click="ChooseImage">
						<text class="cuIcon-pic"></text>
					</view>
					<view class="margin-left" :class="data.videourl==''?'text-yellow':'text-gray'" @click="ChooseVideo">
						<text class="cuIcon-record"></text>
					</view>
					<view class="margin-left" :class="postdata.tags.length<3?'text-yellow':'text-gray'" @click="showmodal='showtags'">
						<text class="cuIcon-tag"></text>
					</view>
				</view>
			</view>
			<view class="padding bg-white padding-top-xs" v-if="postdata.tags.length>0">
				<view class="cu-capsule round" v-for="(tag, index) in postdata.tags" :key="index">
					<view class='cu-tag bg-orange light'>{{tag}}</view>
					<view class="cu-tag bg-orange" @click="taptags(tag)">
						<text class='cuIcon-close'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group" v-if="data.pics.length>0 || data.videourl!=''">
				<view class="grid col-4 grid-square flex-sub">
					<view class="solids bg-img" v-if="data.videourl!=''">
						<text class="cuIcon-recordfill"></text>
						<view class="cu-tag bg-red" @tap.stop="rmVideo()">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="bg-img" v-for="(pic,index) in data.pics" :key="index">
						<image :src="pic" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg(index)">
							<text class="cuIcon-close"></text>
						</view>
					</view>
				</view>
			</view>
		</form>
		<view class="cu-modal" :class="showmodal=='showtags'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择标签(最多3个)</view>
					<view class="action" @tap="showmodal=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xs bg-white padding-bottom">
					<view class="grid col-4">
						<view class="padding-xs" @click="taptags(item.name)" v-for="(item, k) in data.tags" :key="k">
							<view class="padding-xs text-center light" :class="postdata.tags.indexOf(item.name)>-1?'bg-red':'bg-grey'">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar tabbar bg-white border-top">
					<view class="submit" @tap="postdata.tags=[]">重置</view>
					<view class="submit bg-gradual-yellow" @tap="showmodal=''">确定</view>
				</view>
			</view>
		</view>
		<view class="cu-bar tabbar foot noshadow">
			<view class="action">
				<view class="flex flex-direction margin-bottom-sm padding-left-xl padding-right-xl">
					<button class="cu-btn bg-gradual-yellow shadow-blur round-topleft-none lg" @click="submitPost">发布</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				id:0,
				postdata:{
					special:1,
					title:"",
					content:"",
					duration:"",
					videourl:"",
					cover:"",
					pics:[],//=pics:[],
					tags:[],
					uid:0,
					id:0
				},
				titles:['','发布作品','发表日记'],
				compressed:true,
				showmodal:'',
				data:{
					title:"发布作品",
					avatar:"@/static/logo.png",
					pics:[],
					nickname:"未登录",
					videourl:'',
					cover:"",
					tags:[],
					section:{
						id:0
					}
				}
			}
		},
		onLoad(options) {
			this.postdata.special = (typeof(options.special)!='undefined' && options.special) ? options.special : 1;
			if(typeof(options.id)!='undefined' && options.id) this.id = options.id;
			if(core.userinfo.uid==0) return core.toast('请先登录','login');
			if(this.id!=null&&this.id!=0){
				this.pageinfo(this.id);
			}
			this.initData('post',{id:this.id,special:this.postdata.special});
		},
		methods:{
			async pageinfo(id){
				this.postdata= (await this.$api.reqGet({
					url:"works/selByid/"+id
				})).data;
				// console.log(a)
				// this.postdata.id=a.id;
				// this.postdata.title=a.title;
				// this.postdata.content=a.content;
				// this.postdata.duration=a.duration;
				// this.postdata.videourl=a.videourl;
				// this.postdata.cover = a.worksurl;
				console.log(this.postdata)
				this.data.cover = this.postdata.cover;
				if(this.postdata.videourl!=null){
					this.data.videourl =this.postdata.videourl ;
				}
				this.postdata.tags = JSON.parse(this.postdata.tags);
				var arr= JSON.parse(this.postdata.pics)
				this.postdata.pics=[];
				for(var i=0;i<arr.length;i++){
					this.postdata.pics.push(arr[i]);
					this.data.pics.push(arr[i]);
				}
			},
			 async initData(route, data={}, callback=false){
				var that = this;
				that.data.tags=(await this.$api.reqGet({
					url:"menu/selCourseType/0",
				})).data;
				that.data.nickname=core.userinfo.nickname;
				that.data.avatar=core.userinfo.avatar;
				// core.get(route,function(res){
				// 	// if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 	// 	return core.report(res, true);
				// 	// }
				// 	  // that.data = res;
				// 	uni.setNavigationBarTitle({
				// 		title:res.title
				// 	});
				// 	if(res.section.id>0){
				// 		for(let i in that.postdata){
				// 			that.postdata[i] = res.section[i];
				// 		}
				// 	}
				// 	if(callback){
				// 		callback(res);
				// 	}
				// },data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			DelImg(index){
				var that = this;
				return core.confirm('删除后不可恢复','确定要删除？',function(){
					that.data.pics.splice(index,1);
					that.postdata.pics.splice(index,1);
				});
			},
			rmVideo(){
				var that = this;
				return core.confirm('删除后不可恢复','确定要删除？',function(){
					that.data.videourl = '';
					that.postdata.videourl = '';
				});
			},
			ChooseCover(){
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePaths[0],function(res){
							console.log(res)
							that.data.cover = res.data;
							that.postdata.cover = res.data;
							console.log(that.data.cover)
						});
					}
				});
			},
			ChooseImage(){
				if(this.postdata.pics.length>=9) return core.toast('最多上传9张图片');
				var that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePaths[0],function(res){
							that.data.pics.push(res.data);
							that.postdata.pics.push(res.data);
						});
					}
				});
			},
			ChooseVideo(){
				if(this.data.videourl!='') return core.toast('视频已上传');
				var that = this;
				uni.chooseVideo({
					compressed: false, //默认9
					count: 1,
					compressed:this.compressed,
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePath,function(res){
							that.postdata.videourl = res.data;
							that.data.videourl = res.data;
						},'video');
					}
				});
			},
			taptags(tag){
				if(this.postdata.tags.indexOf(tag)>-1){
					this.postdata.tags.splice(this.postdata.tags.indexOf(tag), 1);
				}else{
					if(this.postdata.tags.length>=3) return core.toast('最多选择3个标签');
					this.postdata.tags.push(tag);
					if(this.postdata.tags.length>=3) this.showmodal = '';
				}
			},
			async submitPost(){
				if(this.postdata.content=='' && this.postdata.pics.length==0 && this.postdata.videourl=='') return core.toast('说点什么吧~');
				if(this.postdata.special==1 && this.postdata.title=='') return core.toast('作品标题不能为空');
				if(this.postdata.special==1 && this.postdata.cover=='' && this.postdata.videourl==''){
					if(this.postdata.pics.length>0){
						this.postdata.cover = this.postdata.pics[0];
						this.data.cover = this.data.pics[0];
					}else{
						return core.toast('作品封面不能为空');
					}
				}
				var pics="[";
				for(var i=0;i<this.postdata.pics.length;i++){
					pics+='"';
					pics+=this.postdata.pics[i];
					pics+='"';
					if(i+1<this.postdata.pics.length){
						pics+=",";
					}
				}
				pics+="]";
				this.postdata.pics=pics;
				var tags="[";
				for(var i=0;i<this.postdata.tags.length;i++){
					tags+='"';
					tags+=this.postdata.tags[i];
					tags+='"';
					if(i+1<this.postdata.tags.length){
						tags+=",";
					}
				}
				tags+="]";
				this.postdata.tags=tags;
				// return core.post('post',function(res){
				// 	if(res.type!='success') return core.report(res);
				// 	core.toast(res.message,res.redirect,'success');
				// },{id:this.data.section.id,data:this.postdata,special:this.postdata.special});
				var that=this;
				that.postdata.uid=core.userinfo.uid;
				console.log(that.postdata)
				var a= (await this.$api.reqPost({
					url:"works/addWorks",
					data:this.postdata
				}));
				if(a.code==200){
					if(this.postdata.special==1){
						core.toast("上传成功待审核","diary/works","success")
					}else if(this.postdata.special==2){
						core.toast("上传成功待审核","diary/index","success")
					}
					
				}
			}
		}
	}
</script>

<style>
	page{background: #F5F5F5;}
	.dialy-post textarea{height: 200upx;}
	.cover{position: relative;}
	.cover .cu-btn{position: absolute; right: 20upx; bottom: 20upx;}
	.cover image{max-height: 360upx;}
	.uploader{padding: 130upx 0; background: #F7F7F7;}
	.nocover image{width: 78upx; height: 63upx;}
</style>
